<template>

  <el-container>
    <div>
      <!-- Form -->
<!--      <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->

      <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="userForm">
          <el-form-item label="旧密码" :label-width="formLabelWidth">
            <el-input v-model="userForm.oldPassword" autocomplete="off" placeholder="请输入旧密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="userForm.newPassword" autocomplete="off" placeholder="请输入新密码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editPassword">修 改</el-button>
        </div>
      </el-dialog>
    </div>
    <el-header class="login-one">
      <el-row>
        <el-col :span="8">
          <div style="margin-top: 5px">
            <img src="../assets/logo.png" width="50" height="50" style="border-radius: 50%" />
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 8px">
            <el-button type="primary" round @click=" dialogFormVisible = true">
              <i class="el-icon-edit"></i>修改密码</el-button>
            <el-button type="danger" round @click="loginOut">
              <i class="el-icon-switch-button"></i>退出登录</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="margin-top: 20px;margin-left: 350px;">
            欢迎<span style="color:crimson;font-size: 20px;font-weight: 500;">{{ username }}</span>登录
          </div>
        </el-col>
      </el-row>
    </el-header>

<!--    菜单 -->
    <el-container>
      <el-aside width="200px">

        <el-row class="tac">

          <el-col :span="100">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#fff"
              text-color="#545c64"
              active-text-color="#ffd04b">
              <el-submenu index="1" >
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span style="align-content: center">车辆管理系统</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="Welcome" index="1-0">首页</el-menu-item>
                  <el-menu-item @click="DriverInfo" index="1-1">驾驶员管理</el-menu-item>
                  <el-menu-item @click="CarInfo" index="1-2">车辆信息管理</el-menu-item>
                  <el-menu-item @click="Reserve" index="1-3">车辆预定管理</el-menu-item>
                </el-menu-item-group>

              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>

      </el-aside>
      <el-container>




        <!--        主体 -->
        <el-main>
          <router-view />
        </el-main>

<!--        脚 -->
        <el-footer>
          @CopyRight 实习第⑥组
        </el-footer>
      </el-container>
    </el-container>
  </el-container>

</template>
<script>
  export default {
    name: "index",
    data() {
      return {
        username: "",
        dialogTableVisible: false,
        dialogFormVisible: false,
        userForm:{
          username:'',
          oldPassword:'',
          newPassword:'',
        },
        formLabelWidth: '120px'
      };
    },
    methods:{
      loginOut(){
        this.$router.push("/");
      },
      //修改密码
      editPassword(){
        console.log("editPassword2:",this.userForm)
        this.$confirm('确认修改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.userForm.username=this.username
          console.log("editPassword:",this.userForm)
          let _this=this;
          this.$axios({
            method:'post',
            url:'user/editPassword/',
            data:JSON.stringify(this.userForm)
          }).then(res =>{
            console.log(res)
            this.dialogFormVisibleEdit=false;
            if(res.data.status === 200){
              this.dialogFormVisible=false;
              _this.$message(res.data.msg);
              _this.Welcome()
            }else{
              _this.$message.error(res.data.msg);
              console.log(res.data)
            }
          }).catch(error=>{
            this.$message.error(error);
          })
        }).catch(() => {
        });
      },
      Welcome() {
        this.$router.push("/index/");

      },
      //跳转到车辆预定页面
      Reserve(){
        console.log("Reserve")
       this.$router.push("/index/Reserve");
     },
     //跳转车辆信息页面
      CarInfo(){
        console.log("carInfo")
        this.$router.push("/index/CarInfo");
      },
      //跳转到车辆预定页面
      DriverInfo(){
        console.log("driverInfo")
        this.$router.push("/index/DriverInfo");
      },
    },
    mounted() {
      this.username=sessionStorage.getItem('loginUsername')
    }
  };
</script>

<style>
  html,
  body,

  #app,
  .el-container {
    height: 99.9%;
    margin-top: 0px;
  }

  .el-footer {
    background-color: #eaeaea;
    color: #505458;
    text-align: center;
    line-height: 60px;
  }

  .login-one {
    background-color: #1c77ac;
    background-repeat: no-repeat;
    overflow: hidden;
    height: 100%;
  }

  /*.el-main,*/
  /*.el-footer {*/
  /*  border: 1px blue solid;*/
  /*}*/
</style>
